<template>
    <page-view>
        <el-card header="分类信息汇总" class="font-bold">
            <ul class="title-bar ">
                <li>
                    <div>总用户数</div>
                    <div>{{ totalInfoData.user_total }}</div>
                </li>
                <li>
                    <div>总订单数</div>
                    <div>{{ totalInfoData.order_total }}</div>
                </li>
                <li>
                    <div>总商品数</div>
                    <div>{{ totalInfoData.food_total }}</div>
                </li>
                <li>
                    <div>总金额数</div>
                    <div>{{ totalInfoData.money_total }}</div>
                </li>
            </ul>
        </el-card>
        <el-card class="mt-13 font-bold ">
            <template #header="订单数据汇总"></template>
            <div class="flex flex-row  justify-around">
                <div id="main" class="w-[800px] h-[700px] inline-block" ref="main"></div>
                <div id="main2" class="w-[800px] h-[700px] inline-block " ref="main2"></div>
            </div>

        </el-card>
    </page-view>
</template>
  
<script setup>

import API from '../utils/API';
import * as echarts from 'echarts';
import { ref, onMounted, } from "vue";
const main = ref()
const main2 = ref()
onMounted(
    () => { init() }
)

const totalInfoData = ref({
    user_total: "",
    order_total: "",
    food_total: "",
    money_total: ""
})
API.dataViewInfo.getTotalInfo().then(result => {
    console.log(result);
    totalInfoData.value = result;
})


const init = () => {

    let myChart = echarts.init(main.value);
    let myChart2 = echarts.init(main2.value);
    let option = {
        legend: {
            top: 'bottom'
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        series: [
            {
                name: 'Nightingale Chart',
                type: 'pie',
                radius: [50, 250],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                data: [
                    { value: '', name: '' },

                ]
            }
        ]
    };
    let option1 = {
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }
        ]
    };



    API.dataViewInfo.getCommentStarData().then((res) => {
        console.log(res);
        res.forEach(item => {
            option1.series[0].data.push(item.star_count);
            option1.xAxis.data.push(`菜品评分${item.star}`)
        })
        myChart.setOption(option1);
    })
    API.dataViewInfo.getCategoryFoodCount().then((res) => {
        console.log(res);
        res.forEach(item => {
            option.series[0].data.push({ value: item.category_food_count, name: item.category_name });

        })
        myChart2.setOption(option);
    })
}
</script>
  
<style scoped lang="scss">
.title-bar {
    @apply border flex flex-row justify-around h-[100px]  font-bold;

    li {
        @apply h-full flex flex-col justify-around items-center
    }
}

</style>